<template>
  <div>
    <div class="content">
      <div class="img img1">
        <img v-lazy="require('@/assets/img/updata2/img1.png')" alt="">
        <a href="" class="backBottom"></a>
      </div>
      <div class="img img2">
        <img v-lazy="require('@/assets/img/updata2/img2.png')" alt="">
      </div>
      <div class="img img3">
        <img v-lazy="require('@/assets/img/updata2/img3.png')" alt="">
      </div>
      <div class="img img4">
        <img v-lazy="require('@/assets/img/updata2/img4.png')" alt="">
        <swiper class="img-content">
          <swiper-slide>
            <img v-lazy="require('@/assets/img/resume/avatar1.png')" alt="">
          </swiper-slide>
          <swiper-slide>
            <img v-lazy="require('@/assets/img/resume/avatar2.png')" alt="">
          </swiper-slide>
        </swiper>
      </div>
      <div class="img img5">
        <img v-lazy="require('@/assets/img/updata2/img5.png')" alt="">
      </div>
      <div class="img img6">
        <img v-lazy="require('@/assets/img/updata2/img6.png')" alt="">
      </div>
      <div class="img img7">
        <img v-lazy="require('@/assets/img/updata2/img7.png')" alt="">
        <div class="jlSwiper">
          <swiper class="swiper gallery-top">
            <swiper-slide class="slide">
              <img v-lazy="require('@/assets/img/resume/resume1.png')" alt="">
            </swiper-slide>
            <swiper-slide class="slide">
              <img v-lazy="require('@/assets/img/resume/resume2.png')" alt="">
            </swiper-slide>
            <swiper-slide class="slide">
              <img v-lazy="require('@/assets/img/resume/resume3.png')" alt="">
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="img img8">
        <img v-lazy="require('@/assets/img/updata2/img8.png')" alt="">
      </div>
      <div class="img img9">
        <img v-lazy="require('@/assets/img/updata2/img9.png')" alt="">
      </div>
      <div class="price-content">
        <div class="wrap">
          <li class="item" :class="{'active': item.id === active}" v-for="item of priceList" :key="item.id" @click="handleClickPrice(item.id)">
            <h3>{{item.name}}</h3>
            <p class="work_year">适合工作<br>{{item.content.for_work_year}}</p>
            <span class="price">¥{{item.money}}</span>
            <div class="old_price">¥{{item.content.old_money}}</div>
          </li>
        </div>
      </div>
      <div id="bottom" class="button">
        <a href="javascript:;" class="btn animate__animated animate__swing animate__slow" @click="handlePay">立即支付</a>
      </div>
      <div class="tip">
        <p>
          <span>Tip</span>
          :如果支付成功后没有查到订单，请手动刷新页面
        </p>
      </div>
      <van-popup :value="showLoginLayer" class="layer" @click-overlay="closeOverlay">
        <Login :productId="ProductId"></Login>
      </van-popup>
      <van-popup :value="showPayLayer" class="layer" @click-overlay="closeOverlay">
        <Pay :ProductId="ProductId"></Pay>
      </van-popup>
    </div>
    <OrderList></OrderList>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {GetProduct} from "../api";
import Login from "../components/Login";
import Pay from "../components/Pay";
import OrderList from "../components/OrderList";

export default {
  name: 'HomeIndex',
  components: {OrderList, Pay, Login},
  data () {
    return {
      active: null,
      ProductId: '',
      priceList: []
    }
  },
  computed: {
    ...mapState({
      showLoginLayer: state => state.showLoginLayer,
      showPayLayer: state => state.showPayLayer
    })
  },
  mounted () {
    GetProduct().then(res => {
      this.priceList = res
    })
  },
  methods: {
    handlePay () {
      // 判断是否选择卡片
      if (this.ProductId === this.active) {
        // 判断如果用户已经登陆
        if (sessionStorage.getItem('apiToken')) {
          this.$store.dispatch('changePayLayerState', true)
          return
        }
        // 未登陆
        this.$store.dispatch('changeLoginLayerState', true)
      } else {
        // 未选择卡片
        this.Toast('请选择购买类别')
      }
    },
    // 点击卡片价格handle
    handleClickPrice (ProductId) {
      this.active = ProductId
      this.ProductId = ProductId
    },
    // 关闭遮罩层
    closeOverlay () {
      this.$store.dispatch('changeLoginLayerState', false)
      this.$store.dispatch('changePayLayerState', false)
    }
  }
}
</script>

<style lang="scss" scoped>
img[lazy=loading] {
  width: 50px;
  height: 50px;
  margin: 50px 0;
}

img[lazy=error] {
  width: 50px;
  height: 50px;
  margin: 50px 0;
}

.content {
  width: 100%;
  height: 100%;
  background: #246070;

  .img {
    width: 100vw;
    position: relative;

    .backBottom {
      position: absolute;
      width: 120px;
      height: 30px;
      background: transparent;
      z-index: 3;
      left: 36%;
      top: 77%;
    }

    img {
      width: 100vw;
      object-fit: contain;
    }
  }

  .img2 {
    width: 100vw;
  }

  .img3 {
    transform: translateY(-6px);
  }

  .img4 {
    transform: translateY(-13px);
    position: relative;

    .img-content {
      position: absolute;
      top: 136px;
      left: 52px;
      width: 273px;
      height: 200px;
      background: transparent;
      border-radius: 12px;

      img {
        position: absolute;
        width: 100%;
        object-fit: cover;
      }
    }
  }

  .img5 {
    transform: translateY(-20px);
  }

  .img6 {
    transform: translateY(-26px);
  }

  .img7 {
    transform: translateY(-33px);
    position: relative;

    .jlSwiper {
      position: absolute;
      width: 80%;
      height: 60%;
      border-radius: 12px;
      background: #317e90;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      top: 190px;

      .swiper {
        width: 100%;
        height: 100%;
        position: relative;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: contain;
          left: 0;
          top: 0;
          border-radius: 12px;
        }
      }
    }
  }

  .img8 {
    transform: translateY(-40px);
  }

  .img9 {
    transform: translateY(-48px);
  }

  .price-content {
    width: 100%;
    height: 150px;
    background: #ffffff;
    transform: translateY(-53px);

    .wrap {
      width: 100vm;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 13px;

      .item {
        display: block;
        flex: 1;
        height: 80%;
        background: #ffffff;
        margin: 0 5px;
        list-style: none;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .3);
        padding: 10px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.4s;

        &.active {
          transform: translateY(-5px);
          box-shadow: 0 0 7px rgba(0, 0, 0, .6);
          background: #e9ceaa;
        }

        h3 {
          font-size: 12px;
          font-style: italic;
          color: #40372d;
          font-weight: bold;
        }

        .work_year {
          font-size: 12px;
          text-align: center;
          padding: 10px 0;
          color: #42382d;
          line-height: 1.2em;
        }

        .price {
          font-size: 18px;
          color: #ed3833;
          font-weight: bold;
        }

        .old_price {
          font-size: 12px;
          color: #c2c2c2;
          position: relative;

          &::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 1px;
            background: #c2c2c2;
            top: 50%;
            left: 0;
          }
        }
      }
    }
  }

  .button {
    display: flex;
    justify-content: center;
    background: #ffffff;
    transform: translateY(-65px);

    .btn {
      display: block;
      width: 40%;
      list-style: none;
      text-decoration: none;
      color: #f8dbb5 !important;
      font-size: 20px;
      word-break: normal;
      font-style: italic;
      font-weight: bold;
      border-radius: 16px;
      padding: 10px 30px;
      background: linear-gradient(45deg, #174969, #08222f);
      margin: 15px;
      color: #ffffff;
      margin-bottom: 30px;
    }
  }

  .tip {
    span {
      color: orange;
    }

    position: relative;
    bottom: 24px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    padding-bottom: 12px;
  }

}

.layer {
  width: 90%;
  height: 260px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

</style>
